<template>
    <div>
        <select>
            <option v-for="dept in departments" v-bind:value="dept.id">{{dept.name}}</option>
        </select>
        <input type="text">
        <button>搜索</button>
    </div>
</template>

<script>
    export default {
        data(){
          return {
              departments : []
          }
        },
        created(){
            let that = this;
            fetch("/api/departments",{headers:{Authorization: "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjQ3M2ZhNzQ2YmZjNDA1Zjk0ZTY1ZDMxNGMxY2I4MjMwZGIyOWU1NDIwOGE3NDdmZDE4M2QzMTY1Y2IyMWRiMDVkODY1MTI0Nzk1ZDdkNzdiIn0.eyJhdWQiOiIyIiwianRpIjoiNDczZmE3NDZiZmM0MDVmOTRlNjVkMzE0YzFjYjgyMzBkYjI5ZTU0MjA4YTc0N2ZkMTgzZDMxNjVjYjIxZGIwNWQ4NjUxMjQ3OTVkN2Q3N2IiLCJpYXQiOjE1Mjk5NzU0MjksIm5iZiI6MTUyOTk3NTQyOSwiZXhwIjoxNTYxNTExNDI4LCJzdWIiOiIxMCIsInNjb3BlcyI6W119.gfNggxy9xr7WUkcSewd2e7eAu_olLMp9Bvsq7paIXFUpAV6cricBFadJW98eR8LjWah7-OqLzoLgs6spVjmp2fYhxIBsn7Lu6Cp-_k9gmLrUWyRkJHkTjF27aNA-z5Cli3j5bB8zgb0efV9evNomhryWGYmW6DY9S7Ye1qmI_yEF1OTxFJpKRkYmpq73814sMzwZe7Qio_nIxzkc5RAWpKyS-N_JoX_LtHh7XP6WeH9EAvrxXAKFSowjoXONb4tzfVVIqK3ou7_DNxA4bnhKQZd4rEh5OVpPOME7LjWXbvaajATYZdWyBO72VgQfBFnj5Wo8_LJgB0WRJYW9oty8i8X4pw_w2t0PpEu74ijITeWvpbCms1hn2wgR7zRSjQ7mUAEwvRBvO_r8HPzqAbigjJD0s70WjX02Ebo5j3-dG4owdD_fq7z-Ie07nojsNa2H3sZi8N4-dtJKhh_8gGiNFaQQQRH3NObL8HZmsZ2cE00y86hyCcR3vKu1kRofvs2YRuFwOzOozkKSS9uKIHzLrPZrlFq0u9Lib47Zdh1rjovz7Gc5CyA-Taa6p4Y393JC5iN6SteNq5PMFH8seGWYgzFYv6JlRJl2eWR3VzqToKNYL80UarjzUptq8ny6pRPK9Gv92AVe56Qp5HCJ4uJb8Y6ncKsmm3ZLfBAQzQ3Dttc"}})
                .then((data)=>data.json())
                .then((data)=>{that.departments=data});
        }
    }
</script>

<style>

</style>